import {connect} from 'react-redux'
import {LoginAction} from '../../store/actions'

import React, { Component } from 'react'
import {request} from '../../network/request'
import Qs from 'qs'
import { List, InputItem, TextareaItem, Button, Toast ,WingBlank } from 'antd-mobile';
import { createForm } from 'rc-form';
import './register.css'



const Item = List.Item;


class Register extends Component {
  
  tologin= (name,pwd) => {
      
      const usr_data = {
        username : name,
        pwd,
        identity : 'outer'
      }
      
      this.props.history.push({pathname:'/login',state:usr_data})
  }
      

  onSubmit = () => {
        const list_data = this.props.form.getFieldsValue();
        if(this.onCheck(list_data)){
          const userdata =Qs.stringify({
           username:list_data.username,
           password:list_data.password
          })
         
          request({
              url: 'user/register',
              method: 'post',
              data: userdata
            }).then(
              res=>{
                console.log(res);
                switch (res.code){
                  case 802 : Toast.info('该用户名已被注册');break
                  case 200 : Toast.success('注册成功') ;this.tologin(list_data.username,list_data.password);break 
                  default : Toast.fail('其他错误') 
                }
              })
        }
       
      } ;
  
  onCheck = (data) => {
    const usr = data.username
    const pwd = data.password
    if(!usr) {Toast.fail('用户名不能为空');return false}
    else if (usr.indexOf(' ') !== -1){Toast.fail('用户名中不能有空字符') ;return false}
    if (pwd !== data.confirm){Toast.fail('两次输入密码不一致') ;return false}
    else if (pwd.length<10){Toast.fail('密码长度要大于10') ;return false}
    return true
  }
 
 
  render() {
    const { getFieldProps, getFieldError } = this.props.form;
    const {verifycodeurl,changeimg} =this.props
    return (
      <div className="register"> 
      <List
        renderHeader={() => '请填写注册信息'}
        renderFooter={() => getFieldError('username') && getFieldError('username').join(',')}
      >
        <InputItem
          {...getFieldProps('username', {
            
            rules: [
              { required: true, message: '请输入用户名' },
            
            ],
          })}
          clear
          error={!!getFieldError('username')}
          onErrorClick={() => {
            alert(getFieldError('username').join('、'));
          }}
          
        >用户名</InputItem>
        <InputItem {...getFieldProps('password',{  
            rules: [
              { required: true, message: '请输入密码' },  
            ],
          })}  type="password"  >
          密码
        </InputItem>
        <InputItem {...getFieldProps('confirm',{
            rules: [
              { required: true, message: '请输入密码' },
            ],
          })}
            type="password">
          确认密码
        </InputItem>

        <Item>
          <Button type="primary" size="small" inline onClick={this.onSubmit}>注册</Button>
        </Item>
      </List>
      </div>
    );
  }
}

const RegisterWrapper = createForm()(Register)



const mapState2Props = (state) => {
  return {
     
  }
}

const mapDispatch2Props = {
    setusrinfo:LoginAction.setuserinfo
    }
  








export default connect(mapState2Props,mapDispatch2Props)(RegisterWrapper)






